/**
 * 未来发展与创新方向组件
 * 展示技术发展趋势、市场规模预测和创新应用场景
 */

import { motion } from "framer-motion";

interface FutureSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function FutureSection({ sectionRef }: FutureSectionProps) {
    return (
        <section
            ref={sectionRef}
            className="py-20 bg-gradient-to-br from-blue-900 to-purple-900 text-white">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">未来发展与创新方向</h2>
                </motion.div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-10 mb-16">
                    {/* 技术发展趋势 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            x: -30
                        }}
                        whileInView={{
                            opacity: 1,
                            x: 0
                        }}
                        transition={{
                            duration: 0.6
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-blue-300/30">
                        <h3 className="text-2xl font-semibold text-blue-300 mb-8">技术发展趋势</h3>
                        <div className="relative pl-8 space-y-10">
                            {/* 时间轴线 */}
                            <div className="absolute left-0 top-0 h-full w-1 bg-blue-400/30"></div>
                            
                            {/* 2025-2026：多模态数据融合 */}
                            <div className="relative">
                                <div className="absolute left-[-10px] top-1 w-5 h-5 rounded-full bg-blue-400 border-4 border-blue-900"></div>
                                <h4 className="text-xl font-bold text-blue-300 mb-3">&nbsp; &nbsp;2025-2026：多模态数据融合</h4>
                                <p className="text-sm text-gray-300">融合简历文本、视频面试、社交媒体等多模态数据，实现更全面的人才画像和精准评估，解析准确率提升至98%</p>
                            </div>
                            
                            {/* 2027-2028：增强人机协作 */}
                            <div className="relative">
                                <div className="absolute left-[-10px] top-1 w-5 h-5 rounded-full bg-purple-400 border-4 border-blue-900"></div>
                                <h4 className="text-xl font-bold text-purple-300 mb-3">&nbsp; &nbsp;2027-2028：增强人机协作</h4>
                                <p className="text-sm text-gray-300">AI与招聘专家深度协作，形成"AI+人类"的混合决策模式，处理速度提升至≤3秒/份，人力成本降低85%</p>
                            </div>
                            
                            {/* 2029-2030：智能人才生态 */}
                            <div className="relative">
                                <div className="absolute left-[-10px] top-1 w-5 h-5 rounded-full bg-pink-400 border-4 border-blue-900"></div>
                                <h4 className="text-xl font-bold text-pink-300 mb-3">&nbsp; &nbsp;2029-2030：智能人才生态</h4>
                                <p className="text-sm text-gray-300">构建基于AI的全周期人才发展生态系统，从简历解析延伸至职业规划、技能发展和绩效预测，形成闭环人才管理</p>
                            </div>
                        </div>
                    </motion.div>
                    
                    {/* 市场规模预测 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            x: 30
                        }}
                        whileInView={{
                            opacity: 1,
                            x: 0
                        }}
                        transition={{
                            duration: 0.6,
                            delay: 0.3
                        }}
                        viewport={{
                            once: true
                        }}
                        className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-blue-300/30 flex flex-col justify-between">
                        <h3 className="text-2xl font-semibold text-blue-300 mb-8">市场规模预测</h3>
                        
                        {/* 图表 */}
                        <div className="flex items-end justify-around h-64 mb-8">
                            <div className="flex flex-col items-center w-1/5">
                                <div
                                    className="bg-gradient-to-t from-blue-600 to-blue-400 rounded-t-lg w-full"
                                    style={{
                                        height: "40px"
                                    }}></div>
                                <span className="text-xs text-gray-300 mt-2">2023</span>
                                <span className="text-xs text-blue-300 mt-1">60亿$</span>
                            </div>
                            <div className="flex flex-col items-center w-1/5">
                                <div
                                    className="bg-gradient-to-t from-blue-600 to-blue-400 rounded-t-lg w-full"
                                    style={{
                                        height: "80px"
                                    }}></div>
                                <span className="text-xs text-gray-300 mt-2">2025</span>
                                <span className="text-xs text-blue-300 mt-1">120亿$</span>
                            </div>
                            <div className="flex flex-col items-center w-1/5">
                                <div
                                    className="bg-gradient-to-t from-purple-600 to-purple-400 rounded-t-lg w-full"
                                    style={{
                                        height: "120px"
                                    }}></div>
                                <span className="text-xs text-gray-300 mt-2">2027</span>
                                <span className="text-xs text-purple-300 mt-1">180亿$</span>
                            </div>
                            <div className="flex flex-col items-center w-1/5">
                                <div
                                    className="bg-gradient-to-t from-pink-600 to-pink-400 rounded-t-lg w-full"
                                    style={{
                                        height: "160px"
                                    }}></div>
                                <span className="text-xs text-gray-300 mt-2">2030</span>
                                <span className="text-xs text-pink-300 mt-1">240亿$</span>
                            </div>
                        </div>
                        
                        {/* 说明文字 */}
                        <div className="text-center">
                            <p className="text-xs text-gray-400">全球AI招聘市场规模预测（2023-2030）</p>
                            <p className="text-xs text-blue-300 mt-2">年复合增长率(CAGR)：18.7%</p>
                        </div>
                    </motion.div>
                </div>
                
                {/* 创新应用场景 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6,
                        delay: 0.5
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h3 className="text-2xl font-semibold text-blue-300 mb-8 text-center">创新应用场景</h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {/* 智能人才匹配 */}
                        <div className="bg-gradient-to-br from-blue-800 to-blue-900 rounded-2xl p-6 flex flex-col">
                            <div className="bg-blue-700 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                                <i className="fa-solid fa-puzzle-piece text-blue-300 text-xl"></i>
                            </div>
                            <h4 className="text-xl font-semibold text-blue-300 mb-4">智能人才匹配</h4>
                            <p className="text-sm text-gray-300 flex-grow">基于深度语义理解的人岗匹配算法，结合企业文化与团队协作需求，实现95%以上的匹配准确率，降低人才流失率40%</p>
                            <div className="mt-6 flex items-center">
                                <span className="text-xs text-blue-400">预计落地时间：</span>
                                <span className="text-xs text-white ml-2">2025年Q4</span>
                            </div>
                        </div>
                        
                        {/* 全球化人才库 */}
                        <div className="bg-gradient-to-br from-purple-800 to-purple-900 rounded-2xl p-6 flex flex-col">
                            <div className="bg-purple-700 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                                <i className="fa-solid fa-globe-americas text-purple-300 text-xl"></i>
                            </div>
                            <h4 className="text-xl font-semibold text-purple-300 mb-4">全球化人才库</h4>
                            <p className="text-sm text-gray-300 flex-grow">支持40+语言的简历解析与跨文化能力评估，打破地域限制，为企业提供全球化人才获取渠道，国际化招聘效率提升65%</p>
                            <div className="mt-6 flex items-center">
                                <span className="text-xs text-purple-400">预计落地时间：</span>
                                <span className="text-xs text-white ml-2">2026年Q2</span>
                            </div>
                        </div>
                        
                        {/* 人才发展预测 */}
                        <div className="bg-gradient-to-br from-pink-800 to-pink-900 rounded-2xl p-6 flex flex-col">
                            <div className="bg-pink-700 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                                <i className="fa-solid fa-chart-line text-pink-300 text-xl"></i>
                            </div>
                            <h4 className="text-xl font-semibold text-pink-300 mb-4">人才发展预测</h4>
                            <p className="text-sm text-gray-300 flex-grow">基于历史数据和行业趋势，预测候选人未来3-5年的职业发展轨迹和潜力，为企业长期人才战略提供决策支持</p>
                            <div className="mt-6 flex items-center">
                                <span className="text-xs text-pink-400">预计落地时间：</span>
                                <span className="text-xs text-white ml-2">2027年Q1</span>
                            </div>
                        </div>
                    </div>
                </motion.div>
            </div>
        </section>
    );
}